<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学习</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
    
    <div id="app">
        
            <template v-for="item in list">
                <el-collapse accordion>
                    <el-collapse-item>
                        <template slot="title">
                            {{item.id}}:    {{item.title}}
                        </template>
                        <div>{{item.answer}}</div>
                    </el-collapse-item>
                </el-collapse>
                <p></p>
            </template>

        <el-button type="primary" @click="selectCom">显示计算机题目</el-button>
        <el-button type="primary" @click="selectMath">显示数学题目</el-button>
        <el-button type="primary" @click="selectEng">显示英语题目</el-button>
        <el-button type="primary" @click="selectArts">显示文史哲题目</el-button>
        <p></p>
        <el-input
                style="width: 300px"
                size="medium"
                placeholder="标题"
                v-model="title"
                autosize
                clearable>
        </el-input>
        <p></p>
        <el-input
                style="width: 300px"
                size="medium"
                placeholder="答案"
                v-model="answer"
                autosize
                clearable>
        </el-input>
        <p></p>
        <p></p>
        <el-button type="success" @click="submitCom">提交计算机题目</el-button>
        <el-button type="success" @click="submitMath">提交数学题目</el-button>
        <el-button type="success" @click="submitEng">提交英语题目</el-button>
        <el-button type="success" @click="submitArts">提交文史哲题目</el-button>
    </div>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var obj =
            new Vue({
                el: '#app',
                data() {
                    return {
                        list :null,
                        title : '',
                        answer : ''
                    }
                },
                methods: {
                    selectCom: function(){
                        const Http = new XMLHttpRequest();
                        const url = "http://westudy.life:12345/ask/selectAll?typeId=1";
                        Http.open("GET", url);
                        Http.send();
                        Http.onreadystatechange = (e) =>{   
                            this.list = JSON.parse(Http.responseText);
                        }
                    },
                    selectMath: function(){
                        const Http = new XMLHttpRequest();
                        const url = "http://westudy.life:12345/ask/selectAll?typeId=2";
                        Http.open("GET", url);
                        Http.send();
                        Http.onreadystatechange = (e) =>{
                            this.list = JSON.parse(Http.responseText);
                        }
                    },
                    selectEng: function(){
                        const Http = new XMLHttpRequest();
                        const url = "http://westudy.life:12345/ask/selectAll?typeId=3";
                        Http.open("GET", url);
                        Http.send();
                        Http.onreadystatechange = (e) =>{
                            this.list = JSON.parse(Http.responseText);
                        }
                    },
                    selectArts: function(){
                        const Http = new XMLHttpRequest();
                        const url = "http://westudy.life:12345/ask/selectAll?typeId=4";
                        Http.open("GET", url);
                        Http.send();
                        Http.onreadystatechange = (e) =>{
                            this.list = JSON.parse(Http.responseText);
                        }
                    },
                    submitCom: function(){
                    	var title = this.title;
                    	var answer = this.answer;
                   		const http = new XMLHttpRequest();
                   		const url = "http://westudy.life:12345/ask/add?title=" +title
                            +"&answer="+answer+"&typeId=1";
                   		http.open("GET", url);
                   		http.send();
                    	alert("计算机题目提交成功");
                    	location.reload();

                    },
                    submitMath: function(){
                        var title = this.title;
                        var answer = this.answer;
                        const http = new XMLHttpRequest();
                        const url = "http://westudy.life:12345/ask/add?title=" +title
                            +"&answer="+answer+"&typeId=2";
                        http.open("GET", url);
                        http.send();
                        alert("数学题目提交成功");
                        location.reload();

                    },
                    submitEng: function(){
                        var title = this.title;
                        var answer = this.answer;
                        const http = new XMLHttpRequest();
                        const url = "http://westudy.life:12345/ask/add?title=" +title
                            +"&answer="+answer+"&typeId=3";
                        http.open("GET", url);
                        http.send();
                        alert("英语题目提交成功");
                        location.reload();

                    },
                    submitArts: function(){
                        var title = this.title;
                        var answer = this.answer;
                        const http = new XMLHttpRequest();
                        const url = "http://westudy.life:12345/ask/add?title=" +title
                            +"&answer="+answer+"&typeId=4";
                        http.open("GET", url);
                        http.send();
                        alert("文史哲题目提交成功");
                        location.reload();

                    },
                },
                
            });



    </script>

</body>

</html>